<template>
    <div id="map" style="width: 100%; height: 100%"></div>
</template>

<script>
import pointImg from "./img/location.png";
export default {
    components: {},
    props: {
        radius: {
            type: Number,
            default: 100,
        },
        locationList: {
            type: Array,
            default: [],
        },
    },
    data() {
        return {
            map: null,
            currentLayer: null,
        };
    },
    watch: {
        radius() {
            this.drawCircle();
        },
    },
    methods: {
        initMap() {
            const gaodeMapLayer = new ol.layer.Tile({
                title: "高德地图",
                source: new ol.source.XYZ({
                    url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
                    wrapX: false,
                }),
                preload: Infinity, // 预加载
            });
            this.map = new ol.Map({
                layers: [gaodeMapLayer],
                view: new ol.View({
                    center: ol.proj.transform(
                        [108.93, 34.33],
                        "EPSG:4326",
                        "EPSG:3857"
                    ), //地图初始中心点
                    projection: "EPSG:3857",
                    zoom: 16,
                    minZoom: 1,
                }),
                target: "map",
            });
            this.locationList.forEach((item) => {
            });
            this.map.addEventListener("moveend", () => {
                this.drawCircle({
                    center: this.map.getView().getCenter(),
                    radius: this.radius,
                });
            });
        },
        drawCircle(location) {
            if (this.currentLayer) {
                this.map.removeLayer(this.currentLayer);
            }
            //实例化Vector要素，通过矢量图层添加到地图容器中
            let iconFeature = new ol.Feature({
                geometry: new ol.geom.Point(location.center),
            });
            iconFeature.setStyle(createLabelStyle());

            //创建一个圆
            let Circle = new ol.Feature({
                geometry: new ol.geom.Circle(location.center, +location.radius),
            });
            Circle.setStyle(
                new ol.style.Style({
                    //填充色
                    fill: new ol.style.Fill({
                        color: "rgba(255, 255, 255, 0.5)",
                    }),
                    //边线颜色
                    stroke: new ol.style.Stroke({
                        color: "skyblue",
                        width: 2,
                        lineDash: [5, 10],
                    }),
                })
            );

            //实例化一个矢量图层Vector作为绘制层
            let source = new ol.source.Vector({
                features: [Circle, iconFeature],
            });
            //创建一个图层
            this.currentLayer = new ol.layer.Vector({
                source: source,
            });
            //将绘制层添加到地图容器中
            this.map.addLayer(this.currentLayer);
            // 将中心点位传到父组件中
            this.$emit(
                "getCenter",
                ol.proj.transform(location.center, "EPSG:3857", "EPSG:4326")
            );
            /**
             * 创建矢量标注样式函数,设置image为图标ol.style.Icon
             * @param {ol.Feature} feature 要素
             */
            function createLabelStyle() {
                return new ol.style.Style({
                    /**{olx.style.IconOptions}类型*/
                    image: new ol.style.Icon({
                        // offset: [0, 10],
                        //图标缩放比例
                        scale: 0.75,
                        //透明度
                        opacity: 0.75,
                        //图标的url
                        src: pointImg,
                    }),
                });
            }
        },
    },
    mounted() {
        this.initMap();
    },
};
</script>

<style lang="less" scoped></style>
